<template>
    <div class="imformation">
        <!-- 资讯tabs -->
        <div class="sticky">
            <div class="tabs">
                <nuxt-link v-for="(item, index) in tabsList" :key="item.id"
                    :class="{ tab: true, 'tab-s': tabsIndex == index }" :style="{ width: 100 / tabsList.length + '%' }"
                    :to="`/information/${item.pathName}/1`">
                    {{ item.name }}
                </nuxt-link>
            </div>
        </div>
        <!-- 资讯tabs end -->

        <!-- 热搜榜 -->
        <div class="resou">
            <div class="carousel">
                <el-image class="intro_bj"
                    :src="'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzzx-abstract.png'"></el-image>
                <div class="intro">
                    <div class="intro_title">
                        {{ introList[tabsIndex].name }}
                    </div>
                    <div class="intro_txt">{{ introList[tabsIndex].txt }}</div>
                </div>
                <!-- <el-carousel
                    ref="carousel"
                    height="380px"
                    :interval="4000"
                    @change="swiperChange"
                >
                    <el-carousel-item
                        v-for="(item, index) in hotList"
                        :key="index"
                    >
                        <nuxt-link
                            target="_blank"
                            :to="`/InformationDetails/${item.id}?name=${tabsList[tabsIndex].name}&tid=${tabsList[tabsIndex].id}`"
                        >
                            <el-image
                                style="width: 670px; height: 380px"
                                :src="item.pic"
                                fit="cover"
                                :alt="item.title"
                            ></el-image>
                        </nuxt-link>
                    </el-carousel-item>
                </el-carousel> -->
            </div>

            <div class="hot">
                <div class="hot-title">热搜榜</div>

                <div class="hot-list">
                    <div v-for="(item, index) in hotList" :key="index">
                        <div class="hot-item">
                            <!-- @mouseenter="setActiveItem(index)" -->

                            <div class="hot-index" :style="{
                                'background-color': `var(--hot${index > 2 ? '4' : index + 1
                                    })`,
                            }">
                                {{ index + 1 }}
                            </div>
                            <nuxt-link target="_blank" :to="`/information/${item.id}.html`">{{ item.title }}</nuxt-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 热搜榜 end -->

        <div v-loading="loading" class="i-list">
            <div v-for="(item, index) in dataList" :key="index">
                <div class="i-item">
                    <el-image class="img" :src="item.pic" :alt="item.title" fit="cover" lazy></el-image>
                    <div class="info">
                        <nuxt-link class="title" target="_blank" :to="`/information/${item.id}.html`">
                            {{ item.title }}
                        </nuxt-link>
                        <div class="abstract" v-html="item.content"></div>
                        <div class="bottom">
                            <div>文章来源：{{ item.resource }}</div>
                            时间：{{ item.push_date }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next, jumper" :current-page="page" :total="total"
                    :page-size="pageSize" @current-change="changePage">
                </el-pagination>
            </div>
        </div>

        <!-- 推荐阅读 -->
        <!-- <div class="recommendedReading_bottom">
            <recommendedReading
                :readingList="readingList"
                textKey="content"
            ></recommendedReading>
        </div> -->

        <!-- 浮动弹窗 -->
        <no-ssr>
            <!-- <dynamicPopUps></dynamicPopUps> -->
        </no-ssr>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

import {
    goTop,
    getArr_objKey,
    removeHTMLTags,
    goTopSmooth,
} from "@/assets/utils/utils.js";
import {
    getImformationCate,
    getImformationList,
    getHotImformationList,
    getReadingList,
} from "@/assets/api/InformationApi.js";
import { getanalysedata } from "@/assets/api/indexApi";

// 推荐阅读组件
import recommendedReading from "@/components/recommendedReading/index1.vue";

// 引入介绍json文件
import introduceJson from "@/assets/json/introduce.json";
import dynamicPopUps from "@/components/index/dynamicPopUps.vue";
export default {
    async asyncData({ params }) {
        let data = {
            page: 1,
            pageSize: 20,
            tabsList: [
                {
                    id: 0,
                    name: "热门资讯",
                    pathName: "rmzx",
                    weigh: 0,
                },
                {
                    id: 3,
                    name: "财政资讯",
                    pathName: "czzx",
                    weigh: 10,
                },
                {
                    id: 1,
                    name: "考试资讯",
                    pathName: "kszx",
                    weigh: 9,
                },
                {
                    id: 2,
                    name: "税局稽查",
                    pathName: "sjjc",
                    weigh: 8,
                },
                {
                    id: 4,
                    name: "财税分享",
                    pathName: "ggwz",
                    weigh: 0,
                },
            ],
            tabsIndex: 0,
            total: 0,
            dataList: [],
            hotList: [],
            readingList: [], //推荐阅读列表
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/information/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.tabsIndex = getArr_objKey(data.tabsList, params.type, "pathName");

        data.page = parseInt(params.page.replace(".html", ""));
        data.jsonld["@id"] += params.type + "/" + params.page;

        if (data.tabsIndex == 0) {
            var res = await getHotImformationList({
                page: data.page,
                pageSize: data.pageSize,
            });

            const res2 = await getImformationList({
                is_shouye: 1,
            });
            if (res2.code == 1) { 
                data.hotList = res2.data;
            }
        } else {
            var res = await getImformationList({
                tid: data.tabsList[data.tabsIndex].id,
                page: data.page,
                pageSize: data.pageSize,
            });
        }

        if (res.code == 1) {
            if (res.data.length > 0) {
                data.total = res.data[0].datacount;
                data.jsonld.pubDate = data.jsonld.upDate = res.data[0].push_date
            } else data.total = 0;
            res.data.forEach((item) => {
                if (item.content) {
                    item.content = removeHTMLTags(item.content);
                }
            });
            data.dataList = res.data;
        }

        // const res3 = await getReadingList({});
        // if (res3.code == 1) {
        //     let arr = res3.data;
        //     arr.forEach((item) => {
        //         if (item.content) {
        //             item.content = removeHTMLTags(item.content);
        //         }
        //     });
        //     data.readingList = arr;
        // }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.metaKeywords,
                },
            ],
        };
    },
    components: {
        recommendedReading,
        dynamicPopUps
    },
    data() {
        return {
            metaTitle: "小竹财税资讯",
            metaKeywords: "小竹财税资讯",
            metaDescription:
                "小竹财税资讯汇集众多财税资讯、财税新闻等，实时更新财税信息，为企业财税及财税从业者提供专业的财税信息资讯。",

            // tabsIndex: 0,

            // hotList: [],

            // page: 1,
            // pageSize: 20,
            // dataList: [],
            // total: 0,

            nextLoad: false,

            swiperIndex: 0,

            loading: false,

            introList: [
                {
                    name: "小竹资讯",
                    txt: introduceJson["xzzxzysy"],
                },
                {
                    name: "财政资讯",
                    txt: introduceJson["xzzxzycz"],
                },
                {
                    name: "考证资讯",
                    txt: introduceJson["xzzxzyks"],
                },
                {
                    name: "税局稽查",
                    txt: introduceJson["xzzxzysj"],
                },
                {
                    name: "财税分享",
                    txt: introduceJson["xzzxzygz"],
                },
            ],
            describe: "",
            MetaCode: "",
            // readingList: [], //推荐阅读列表
        };
    },
    created() {
        this.getMetaInfo();
        this.jsonld.title = this.metaTitle + "-【小竹财税平台】";
        this.jsonld.description = this.metaDescription;
    },
    mounted() {
        this.setmenuIndex("80");
        // this.getCate();
        if (this.hotList.length == 0) this.getIndexList();
        if (this.dataList.length == 0) this.getList();
        // this.getRecommendList();
        getanalysedata({
            m_id: 7,
            type: 1,
            code: this.MetaCode,
            describe: this.describe,
        });
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    computed: {
        ...mapState("information", {
            shouyeList: (state) => state.shouyeList,
            indexList: (state) => state.indexList,
        }),
        locationPathname: function () {
            return this.$route.path;
        },
    },
    watch: {
        locationPathname: function (to, from) {
            try {
                // if (window && this.$route.params.type) {
                //     this.tabsIndex = getArr_objKey(
                //         this.tabsList,
                //         this.$route.params.type,
                //         "pathName"
                //     );
                //     this.page = parseInt(
                //         this.$route.params.page.replace(".html", "")
                //     );
                //     this.getMetaInfo();
                //     this.getList();
                //     this.getRecommendList();
                // }
            } catch (error) { }
        },
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        // 获取分类
        // async getCate() {
        //     const res = await getImformationCate({});
        //     if (res.code == 1) {
        //         this.tabsList.push(...res.data);
        //     }
        // },

        getMetaInfo() {
            this.MetaCode = "PJ1";
            if (this.$route.params.type == "rmzx") {
                this.metaTitle = "小竹财税资讯";
                this.metaKeywords = "小竹财税资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众多财税资讯、财税新闻等，实时更新财税信息，为企业财税及财税从业者提供专业的财税信息资讯。";
                this.MetaCode = "PJ1";
                this.describe = "热门资讯";
            } else if (this.$route.params.type == "czzx") {
                this.metaTitle = "财政资讯";
                this.metaKeywords = "财政资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众多财税资讯、财政新闻、财政政策解读等，实时更新财政资讯信息，为企业财税及财税从业者提供专业的财政信息资讯。";
                this.MetaCode = "PJ2";
                this.describe = "财政资讯";
            } else if (this.$route.params.type == "kszx") {
                this.metaTitle = "会计考试资讯";
                this.metaKeywords = "会计考试资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众会计考试资讯、财务考试政策、会计考试条件，实时更新会计考试信息，为企业财税及财税从业者提供专业的会计考试内容资讯。";
                this.MetaCode = "PJ3";
                this.describe = "考试资讯";
            } else if (this.$route.params.type == "sjjc") {
                this.metaTitle = "税局稽查新闻";
                this.metaKeywords = "税局稽查新闻";
                this.metaDescription =
                    "小竹财税资讯汇集众税局稽查资讯、税局稽查新闻等，实时更税局稽查信息，为企业财税及财税从业者提供专业的税局稽查新闻资讯";
                this.MetaCode = "PJ4";
                this.describe = "税局稽查";
            } else if (this.$route.params.type == "ggwz") {
                this.metaTitle = "税务资讯";
                this.metaKeywords = "税务资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众多税务资讯、税务政策解读、税务新闻等，实时更新税务信息，为企业税务提供专业的财税信息资讯。";
                this.MetaCode = "PJ5";
                this.describe = "财税分享";
            }
        },

        // 获取热门榜
        async getIndexList() {
            const res = await getImformationList({
                is_shouye: 1,
            });
            if (res.code == 1) {
                this.hotList = res.data;
            }
        },

        // 获取数据
        async getList() {
            this.loading = true;
            if (this.tabsIndex == 0) {
                this.getIndexList();
                var res = await getHotImformationList({
                    page: this.page,
                    pageSize: this.pageSize,
                });
            } else {
                var res = await getImformationList({
                    tid: this.tabsList[this.tabsIndex].id,
                    page: this.page,
                    pageSize: this.pageSize,
                });
            }
            this.$nextTick(() => {
                goTop(0);
            });

            this.loading = false;
            if (res.code == 1) {
                // if(res.data.length == 0 || res.data.length < this.pageSize){
                //     this.nextLoad = true
                // }
                if (res.data.length > 0) this.total = res.data[0].datacount;
                else this.total = 0;
                this.dataList = res.data;
            }
        },

        // getNextList(){
        //     console.log('下一页')
        //     if(this.nextLoad) return
        //     this.page += 1
        //     this.getList()
        // },

        // 切换分页
        changePage(page) {
            this.$router.push({
                path: `/information/${this.$route.params.type}/${page}`,
            });
            // this.page = page;
            // this.getList();
        },

        changTabs(index) {
            this.tabsIndex = index;
            this.page = 1;
            // this.dataList = []
            this.getList();
        },

        // 鼠标悬浮切换轮播
        setActiveItem(index) {
            this.swiperIndex = index;
            // this.$refs.carousel.setActiveItem(index);
        },

        // 轮播切换触发
        swiperChange(index) {
            this.swiperIndex = index;
        },

        //获取推荐阅读列表
        async getRecommendList(is = false) {
            var res =
                is && this.ReadingList
                    ? this.ReadingList
                    : await getReadingList({});
            if (res.code == 1) {
                let arr = res.data;
                arr.forEach((item) => {
                    if (item.content) {
                        item.content = removeHTMLTags(item.content);
                    }
                });
                this.readingList = arr;
            }
        },
    },
};
</script>
<style>
:root {
    --hot1: #ff8f1f;
    --hot2: #ffad5c;
    --hot3: #ffce9d;
    --hot4: #d5d5d5;
}
</style>

<style lang="scss" scoped>
.imformation {
    padding-top: 28px;
}

.sticky {
    position: sticky;
    top: 80px;
    left: 0;
    z-index: 100;
}

.tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 1200px;
    margin: 0 auto;
    color: #333333;
    margin-bottom: 20px;

    .tab {
        height: 64px;
        background: #ffffff;
        line-height: 64px;
        text-align: center;
        cursor: pointer;

        &:hover {
            background-color: rgb(236, 245, 255);
        }
    }

    .tab-s {
        font-size: 16px;
        color: #ffffff;
        background: #1c87f3 !important;
    }
}

.resou {
    width: 1200px;
    margin: 0 auto;
    height: auto;
    background: #ffffff;
    display: flex;

    .carousel {
        width: 568px;
        position: relative;
        margin-right: 64px;

        .intro_bj {
            width: 100%;
            height: 330px;
        }

        .intro {
            position: absolute;
            top: 66px;
            left: 47px;

            .intro_title {
                font-size: 18px;
                font-weight: 400;
                color: #ffffff;
                line-height: 22px;
            }

            .intro_txt {
                width: 278px;
                font-size: 12px;
                margin-top: 20px;
                font-weight: 400;
                color: #cde0ff;
                line-height: 22px;
            }
        }
    }

    .hot {
        padding: 33px;
        width: 530px;
        box-sizing: border-box;
        height: 330px;

        .hot-title {
            font-size: 20px;
            font-weight: 500;
            color: #333333;
            display: flex;
            align-items: center;

            &::before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 20px;
                background: #1c87f3;
                border-radius: 17px 17px 17px 17px;
                margin-right: 11px;
            }
        }

        .hot-list {
            margin-top: 38px;

            .hot-item {
                margin-top: 20px;
                font-size: 15px;
                color: #333333;

                &:hover {
                    a {
                        color: #1c87f3;
                    }
                }

                .hot-index {
                    display: inline-block;
                    vertical-align: middle;
                    width: 18px;
                    height: 18px;
                    border-radius: 18px;
                    line-height: 18px;
                    text-align: center;
                    margin-right: 11px;
                    font-size: 14px;
                    color: #ffffff;
                }

                a {
                    display: inline-block;
                    vertical-align: middle;
                    width: 430px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                }
            }
        }
    }
}

.i-list {
    width: 1200px;
    background: #ffffff;
    margin: 20px auto;
}

.i-item {
    color: #333333;
    display: flex;
    align-items: center;
    padding: 32px 38px 25px 38px;

    &:hover {
        background: #f7f9fb;
    }

    .img {
        width: 220px;
        height: 137px;
        min-width: 220px;
        min-height: 137px;
        border-radius: 6px 6px 6px 6px;
        margin-right: 42px;
    }

    .info {
        .title {
            font-size: 18px;
            line-height: 22px;

            // height: 98px;
            &:hover {
                color: #1c87f3;
                text-decoration: underline;
            }
        }

        .abstract {
            margin: 16px 0 20px 0;
            // width: 600px;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
            overflow: hidden;
            // white-space: nowrap;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 这里设置的是文本的最大行数 */
            -webkit-box-orient: vertical;
            height: 44px;

            &::v-deep p {
                line-height: 22px !important;
                white-space: break-spaces;
            }

            &::v-deep span {
                line-height: 22px !important;
                white-space: break-spaces;
            }

            &::v-deep a {
                line-height: 22px !important;
                white-space: break-spaces;
            }

            &::v-deep img {
                display: none;
            }
        }

        .bottom {
            color: #999999;
            font-size: 12px;

            div {
                display: inline-block;
                min-width: 160px;
                margin-right: 15px;
            }
        }
    }
}

.pagination {
    text-align: center;
    padding: 20px 0;
}

.recommendedReading_bottom {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 80px;
}
</style>